<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start;padding-right: 30px;">
      <el-date-picker v-model="paytime" style="width:40%;margin-right:20px;padding-right: 30px;" type="daterange" rangeSeparator="至"
        startPlaceholder="开始日期" endPlaceholder="结束日期" valueFormat="yyyy-MM-dd" clearable
      >
      </el-date-picker>
      <el-select style="width:33.3%;padding-right: 30px;" v-model="caiptaltype" placeholder="请选择请款种类" @change="getsecondearr($event)">
        <el-option v-for="item in firstarr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-select style="width:33.3%;padding-right: 30px;" v-model="childcaiptaltype" placeholder="请选择请款子类" :disabled="caiptaltype==''">
        <el-option v-for="item in secondarr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-input v-model="detail" style="width:33.3%;padding-right: 30px;" placeholder="请输入请款用途" clearable></el-input>
      <selectorg @getselectorgid="getselectorgid" style="padding-right: 30px;"></selectorg>

    </el-row>
    <el-row>

      <!-- <el-input v-model="jes" style="width:13.3%;" placeholder="申请金额下限" clearable></el-input>
      <span style="margin:10px ">至</span>
      <el-input v-model="jez" style="width:13.3%;" placeholder="申请金额上限" clearable></el-input> -->
      <el-input v-model="username" style="width:23.3%;padding-right: 30px;" placeholder="员工姓名" clearable></el-input>
      <el-select style="width:35%;padding-right: 30px;" v-model="moneystatus" multiple placeholder="请选择支付状态">
        <el-option v-for="item in paystatus" :key="item.pname" :label="item.pname" :value="item.pname"></el-option>
      </el-select>
      <el-button size="mini" type="primary" @click="getlist(1)">查询</el-button>
      <el-button size="mini" type="info" @click="daochu">导出</el-button><span style="padding-left:15px">总金额：{{allsum}}</span>
    </el-row>
    <el-divider></el-divider>
    <ptable :tableData="list" :pagobj.sync="pagobj"></ptable>
    <ptable id="tableExcelmoney" :tableData="list1" v-show="false" :pagobj.sync="pagobj1"></ptable>
    <checksp :nowapprovalid="nowapprovalid" v-if="showresub" :isnew="false" atypeid="0101"
      :checkitem="checkitem" :fun="fun2"
    ></checksp>
  </div>
</template>

<script>

import ptable from '~/components/querysum/money/reimtable.vue';
import selectorg from '~/components/common/selectorg.vue';
import checksp from '~/components/apply/checksp';

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  components: {
    ptable, selectorg, checksp,
  },
  data() {
    return {

      ts: this.newStore(),
      list: [],
      list1: [],
      paytime: [],
      childcaiptaltype: '',
      caiptaltype: '',
      content: '',
      dept: '',
      firstarr: [],
      secondarr: [],
      moneystatus: [],
      paystatus: [{ pname: '未付款' }, { pname: '支票未回票' }, { pname: '汇款未回票' }, { pname: '支票已回票' }, { pname: '汇款已回票' }],
      username: '',
      jes: '',
      jez: '',
      detail: '',
      allsum: '',
      showresub: false,
      nowapprovalid: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      pagobj1: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      checkitem: {
        hash: {
          atype: '',
          id: '',
        },
      },
    };
  },
  mounted() {
    // this.getlist();
    this.getitem();
  },
  methods: {
    fun2() {

    },
    daochu() {
      if (this.list1.length == 0) {
        this.$message({
          type: 'error',
          message: '导出数据为空,无法导出',
        });
        return false;
      }
      const fix = document.querySelector('el-table__fixed');
      let tb;
      if (fix) { // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        tb = document.querySelector('#tableExcelmoney').removeChild(fix);
      } else {
        tb = document.querySelector('#tableExcelmoney');
      }


      const xlsxParam = { raw: true }; // 转换成excel时，使用原始的格式
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(
        tb,
        xlsxParam,
      );
      console.log(wb);
      /* get binary string as output */
      const wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          'sheetjs.xlsx',
        );
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },
    opendiag(item) {
      console.log(item);

      this.nowapprovalid = item.hash.aid;
      this.checkitem.hash.atype = '0102';
      this.checkitem.hash.id = item.hash.aid;
      this.reload('showresub');
    },
    reload(partsname) {
      // console.log(partsname);
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    getselectorgid(val) {
      this.dept = val;
    },
    getitem() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0505',
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.firstarr = ts.d.data.operation1;
      });
    },
    getsecondearr(val) {
      this.childmounttype = '';
      this.secondarr = [];
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: val,
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.secondarr = ts.d.data.operation1;
      });
    },
    // 获取列表
    getlist(p) {
      // console.log("2222");
      if (p) {
        this.pagobj.currentPage3 = p;
      }
      if (!this.paytime) {
        this.paytime = ['', ''];
      }
      const req = {
        handle: 'E0E144082D7A10B2DC400B628CBD4AE893322D12B26D85F8',
        examines: this.paytime[0],
        examinee: this.paytime[1],
        capitaltype: this.caiptaltype,
        childcapitaltype: this.childcaiptaltype,
        detail: this.detail,
        branchid: this.dept,
        username: this.username,
        jes: this.jes,
        jez: this.jez,
        beizhu: this.beizhu,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
        moneystatus: this.moneystatus.join(','),


      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.list = ts.d.data.operation1;
          this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
          this.allsum = ts.d.data.operation2[0].hash.allsum;
        }
      });
      req.limit = 100000;
      req.start = 0;
      this.list1 = [];
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.list1 = ts.d.data.operation1;
          this.pagobj1.total = parseInt(ts.d.data.operation2[0].hash.allrs);
        }
      });
    },
  },
};
</script>

